<template>
        <my-list-space>
            <v-container fluid>
                <v-row dense>
                    <v-hover
                            v-slot:default="{ hover }"
                            v-for="item in categoryList"
                            :key="item.id"
                    >
                        <v-col cols="3">
                            <div
                                    class="rounded-lg category-box"
                                    style="position: relative"
                                    :class="{'elevation-3': !hover, 'elevation-10': hover}"
                                    @click="$router.push('/disk/collection?cid=' + item.id)"
                            >
                                <div class="text-truncate text-h6" style="margin-right: 30px" :title="item.name">
                                    {{item.name}}
                                </div>
                                <div class="category-menu">
                                    <v-menu offset-y>
                                        <template v-slot:activator="{ on, attrs }">
                                            <v-btn
                                                    v-bind="attrs"
                                                    v-on="on"
                                                    icon
                                            >
                                                <v-icon size="18px">mdi-dots-vertical</v-icon>
                                            </v-btn>
                                        </template>
                                        <v-list dense>
                                            <v-list-item @click="openRenameDialog(item)">
                                                <v-list-item-title>重命名</v-list-item-title>
                                            </v-list-item>
                                            <v-list-item @click="openDeleteDialog(item.id)">
                                                <v-list-item-title>删除</v-list-item-title>
                                            </v-list-item>
                                        </v-list>
                                    </v-menu>
                                </div>
                                <div class="category-info">{{item.quantity}}个链接</div>
                                <div class="category-info">{{item.createTime}}</div>
                            </div>
                        </v-col>
                    </v-hover>
                </v-row>
            </v-container>


            <my-delete-category-dialog
                    @reset-delete="resetDelete()"
                    @delete-success="deleteSuccess()"
                    :delete-category-dialog="deleteCategoryDialog"
                    :id="id"
            ></my-delete-category-dialog>
            <my-rename-category-dialog
                    @reset-rename="resetRename()"
                    @rename-success="renameSuccess()"
                    :rename-category-dialog="renameCategoryDialog"
                    :category="category"
            ></my-rename-category-dialog>
        </my-list-space>
</template>

<script>
    import MyRenameCategoryDialog from "./MyRenameCategoryDialog";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    import MyDeleteCategoryDialog from "./MyDeleteCategoryDialog";
    import MyListSpace from "../../common/MyListSpace";
    export default {
        name: "MyCategoryList",
        components: {MyListSpace, MyDeleteCategoryDialog, MyLoadingOverlay, MyRenameCategoryDialog},
        props: {
            categoryList: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                renameCategoryDialog: false,
                deleteCategoryDialog: false,
                category: {},
                id: 0
            }
        },
        methods: {
            openRenameDialog(category) {
                this.category = category;
                this.renameCategoryDialog = true;
            },
            resetRename() {
                this.category = {};
                this.renameCategoryDialog = false;
            },
            renameSuccess() {
                this.resetRename();
                this.$emit("reset-category-list")
            },
            openDeleteDialog(id) {
                this.id = id;
                this.deleteCategoryDialog = true;
            },
            resetDelete() {
                this.deleteCategoryDialog = false;
                this.id = 0;
            },
            deleteSuccess() {
                this.resetDelete();
                this.$emit("reset-category-list");
            }
        }
    }
</script>

<style scoped>
    .category-box {
        padding: 10px;
        height: 100px;
    }

    .category-info {
        color: rgba(0,0,0,.6);
        font-size: 14px;
        margin-top: 4px;
        margin-left: 10px;
    }

    .category-menu {
        position: absolute;
        top: 10px;
        right: 0;
    }

</style>